<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body{
      font-family: Arial, "Microsoft Yahei", "微软雅黑", STHeiti, "华文细黑", sans-serif;
      color: #555;
      font-size: 16px;
      background: #fff;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .el-card__body, .el-main {
      padding: 0;
    }
  </style>
</head>
<body>
<div id="app" >
  <el-container>
    <el-header style="width: 1301px; margin: 0 auto">
      <img src="imgs/111.jpg" width="200" alt="" >
      <el-menu router="true"
               :default-active="activeIndex"
               class="el-menu-demo" mode="horizontal"
               collapse-transition="true"
               text-color="#303133"
               style="float: right;margin: 0 auto"
               active-text-color="red"
               @select="handleSelect">

        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">企业概况</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-menu-item index="2-4">选项4</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">党建园地</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
          <el-menu-item index="3-3">选项3</el-menu-item>
          <el-menu-item index="3-4">选项4</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">新闻中心</template>
          <el-menu-item index="4-1">选项1</el-menu-item>
          <el-menu-item index="4-2">选项2</el-menu-item>
          <el-menu-item index="4-3">选项3</el-menu-item>
          <el-menu-item index="4-4">选项4</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">我是业主</template>
          <el-menu-item index="5-1">登录</el-menu-item>
          <el-menu-item index="5-2">选项2</el-menu-item>
          <el-menu-item index="5-3">选项3</el-menu-item>
          <el-menu-item index="5-4">选项4</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">加入我们</template>
          <el-menu-item index="6-1">选项1</el-menu-item>
          <el-menu-item index="6-2">选项2</el-menu-item>
          <el-menu-item index="6-3">选项3</el-menu-item>
          <el-menu-item index="6-4">选项4</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title"><i class="el-icon-search"></i> </template>
          <el-input >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-main style="width: 1301px; margin: 0 auto">
      <div class="block"  style="margin: 0 auto;height: 900px">
        <el-carousel height="900px">
          <el-carousel-item v-for="item in arr" :key="item">
            <img :src="item.url" height= "100%" width="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div >
        <p><b>新闻中心</b> <a style="text-decoration:none" href="news.html"><span style="float: right" >更多<i class=" el-icon-d-arrow-right"></i></span></a></p>
      </div>
      <el-row gutter="5">
        <el-col span="12">
          <el-carousel trigger="click" height="300px">
            <el-carousel-item v-for="item in arr1" :key="item">
              <img :src="item.url" width="100%" alt="">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col span="12">
          <el-card>
            <el-table :data="title">
              <el-table-column prop="created" label=""></el-table-column>
              <el-table-column prop="title" label=""></el-table-column>
            </el-table>
            <el-divider></el-divider>
          </el-card>
        </el-col>
      </el-row>`

      <el-tabs type="border-card" >
        <el-tab-pane >
          <span slot="label"><i class="el-icon-wallet"></i>产城空间开发</span>
          <img src="imgs/t1hh.jpg" width="100%" alt="">
        </el-tab-pane>
        <el-tab-pane >
          <span slot="label"><i class="el-icon-s-data"></i>物业管理服务</span>
          <img src="imgs/jh2.jpg" width="100%" alt="">
        </el-tab-pane>
        <el-tab-pane >
          <span slot="label"><i class="el-icon-s-check"></i>产业生态运营</span>
          <img src="imgs/jh3.jpg" width="100%"  alt="">
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-coin"></i>主页生态投资</span>
          <img src="imgs/jh4.jpg" width="100%"  alt="">
        </el-tab-pane>
      </el-tabs>

      <el-row gutter="20">
        <el-col span="6">
          <el-card>
            <img src="imgs/4.jpg" width="100%" >
            <p style="font-size: 14px;height: 30px;text-align: center">公司文化</p>
          </el-card>
        </el-col>
        <el-col span="6">
          <el-card>
            <img src="imgs/4.jpg" width="100%" >
            <p style="font-size: 14px;height: 30px;text-align: center">公司文化</p>
          </el-card>
        </el-col>
        <el-col span="6">
          <el-card>
            <img src="imgs/4.jpg" width="100%" >
            <p style="font-size: 14px;height: 30px;text-align: center">公司文化</p>
          </el-card>
        </el-col>
        <el-col span="6">
          <el-card>
            <img src="imgs/4.jpg" width="100%" >
            <p style="font-size: 14px;height: 30px;text-align: center">公司文化</p>
          </el-card>
        </el-col>
      </el-row>


    </el-main>
    <el-footer>
      <div style="background-color: #282c30;
            color: #666666;text-align: center;
            font-size: 5px; padding: 20px 0">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      </div></el-footer>
  </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        activeIndex: '1',
        arr:[],
        arr1:[],
        title:[{date:"2023.4.7",title:"汇福聚财物业集团召开2022年工程管理总结暨2023年工程管理工作开展思路专题会议"},
          {date:"2023.4.7",title:"汇福聚财物业集团召开2022年工程管理总结暨2023年工程管理工作开展思路专题会议"},
          {date:"2023.4.7",title:"汇福聚财物业集团召开2022年工程管理总结暨2023年工程管理工作开展思路专题会议"},]
      }
    },
    methods:{
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created:function (){
      axios.get("/banner/selectIndexOne").then(function (response){
        v.arr=response.data;
      })
      axios.get("/banner/selectIndexTwo").then(function (response){
        v.arr1=response.data;
      })
      axios.get("/newsrelease/selectIndex").then(function (response){
        v.title=response.data;
      })
    }
  })
</script>
</html>